<template>
  <view class="course_list_container">
    <view class="course_list ">
      <view class="course_item flex" v-for="item in courseList" :key="item.id">
        <image 
        :src="item.cover" 
        mode="scaleToFill"
        class="course_img" />
        <view class="course_content flex_c">
          <view class="title">{{ item.title }}</view>
          <view class="course_price_buy flex">
            <view class="course_price">￥ {{ item.price }} &nbsp;</view>
            <view class="course_buy">{{item.buyCount}} 人购买</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="status === 'nomore'" class="nomore"
      >------ 没有更多了 ------</view
    >
    <v-scroll-top></v-scroll-top>
  </view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {onShow,onLoad,onReachBottom,onPageScroll} from '@dcloudio/uni-app'
import serviceCourse from '@/api/course'
import type{containId,StatusType} from '@/utils/type';
//定义响应式数据
const courseList = ref<containId[]>([]);
const status = ref<StatusType>("more");
const params = {
  page:1,
  limit:10,
}
onLoad(()=>{
  getCartList();
})
onReachBottom(()=>{
  status.value === 'more' && getCartList()
})
onPageScroll((e)=>{
  // console.log(e.scrollTop);
  uni.$emit('pageScroll',e.scrollTop)
  
})
async function getCartList(){
  try {
    status.value = 'loading';
    let result = await serviceCourse.getCartList(params); 
    if(result.code === 200){
      let items = result.data.items;
      if(items.length >0){
        if(items.length < 10){
          status.value = 'nomore'
        }else{
          status.value = 'more'
        }
        // 修改courseList的状态
        courseList.value.push(...items);
        // 修改分页的页数
        params.page++;
      }else{
        status.value = 'nomore'
      }
    }
  } catch (error) {
    status.value = 'error'
  }
}

</script>
<style scoped lang="less">
.course_list_container {
  background: #eee;
  .course_list {
    .course_item {
      padding: 25rpx;
      margin-bottom: 20rpx;
      background:#fff;
      .course_img {
        width: 226rpx;
        height: 128rpx;
        margin-right: 30rpx;
        min-height: 20rpx;
      }

      .course_content {
        justify-content: space-evenly;

        .title {
          font-size: 26rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .course_price_buy{
          font-size: 28rpx;
        }
        .course_price{
          font-size: 40rpx;
          color:#e53935;
        }
      }
    }
  }
  .nomore {
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 26rpx;
  }
}
</style>